<template>
	<section class="pb50">
		<section class="main-wrap pb15" style="background-image: url(./static/imgs/minebg.png)">
			<div class="clearfix pt15">
				<router-link to="/service" class="fl ml20 lh30">
					<img :src="service" width="24" height="24" alt>
				</router-link>
				<img
					class="fr mr20 mt5"
					:src="out"
					width="20"
					height="20"
					alt
					v-show="userInfo.userPhone"
					@click="loginOut"
				>
			</div>
			<Board :userInfo="userInfo"/>
			<UserBar :userInfo="userInfo" :topupAuth="topupAuth"/>
		</section>
		<List :userInfo="userInfo" :channelInfo="channelInfo" :system="system" :mission="mission"/>
		<Nav></Nav>
	</section>
</template>
<script>
import QRCode from 'qrcode'
import Nav from '@views/Nav'
import { mapState, mapGetters, mapMutations } from 'vuex'
import Board from './subPage/board.vue'
import UserBar from './subPage/userBar.vue'
import List from './subPage/list.vue'

export default {
	name: 'Mine',
	components: {
		Board,
		UserBar,
		List,
		Nav
	},
	data() {
		return {
			out: './static/imgs/out.svg',
			service: './static/imgs/service.svg',
			QRCodeImg: ''
		}
	},
	mounted() {},
	computed: {
		...mapState(['mission', 'system', 'topupAuth', 'userInfo', 'channelInfo'])
	},
	methods: {
		loginOut() {
			MessageBox.confirm(' ', {
				title: '退出',
				message: '确定退出账户?'
			}).then(action => this.$store.dispatch('getLogout'), () => {})
		}
	}
}
</script>
<style scoped lang='scss'>
.main-wrap {
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: left top;
}

.main-wrap main img {
	border-radius: rem(27px);
	margin-top: rem(-27px);
	border: rem(2px) solid #ff756e;
	overflow: hidden;
	background-color: #e22219;
}

.main-wrap .logo {
	position: absolute;
	top: rem(10px);
	right: rem(10px);
	width: rem(70px);
	height: rem(28px);
}
</style>